<template>
	<view class="example-body">
		<uni-file-picker 
			title="上传附件" 
			:limit="field.limit || 9" 
			fileMediatype="image" 
			mode="grid" 	
			v-model="imageList" 
			@select="selectFileFun($event)" 
			@delete="pickerDelete($event)"
			:auto-upload="false" 
			:sizeType="sizeType"
			:del-icon="field.delIcon || true"
			/> 					 
	</view>	
</template>

<script>
	import urlConfig from '../../api/config.js';
	export default {
		props: {
			value: String,
			field: Object,
			isEdit: Boolean
		},
		
		data() {
			return {
				sizeType:['compressed'],
				urlConfig:urlConfig,
				imageList:[],
				splitValue:"|"
			}
		},
		  
		emits: ['input'], // 声明 emit 事件
		
		watch: {
		  parentData: {
		    handler(newVal) {
		      // 父组件传值变化时的处理逻辑
		      this.initChildComponent(newVal);
		    },
		    immediate: true, // 立即执行一次，处理初始值
		    deep: true      // 如果需要深度监听对象/数组
		  }
		},
		
	
		created() {
			this.initImageList(this.value);
		},
		
		watch: {
		  value: {
		    handler(newVal) {
		      // 父组件传值变化时的处理逻辑
		      this.initImageList(newVal);
		    },
		    immediate: true, // 立即执行一次，处理初始值
		    deep: true      // 如果需要深度监听对象/数组
		  }
		},
		
		methods: {
			handleImageError(event) {
				this.value = this.defaultImage;
			},
			
			
			async initImageList(val){
				this.imageList = [];
				if(val){
					let imagePaths = val.split(this.splitValue);
					const that = this;
					imagePaths.forEach(function(item,index){
						console.log("====================image:"+item);
						that.imageList.push({
							url: that.urlConfig+"/api/images/"+item,
							name: item
						})
					});
				}
			},
			
			/**
			 * @param {Object} 
			 * 
			 * 选择图片
			 * 
			 */
			async selectFileFun(res) {
				uni.showLoading({
					mask:true
				})
				await this.uploadImg(res.tempFilePaths, 1);
			},
			
			async uploadImg(tempFilePaths, token) {
				if (!tempFilePaths.length) {
					//如果没有选择图片就退出
					return;  
				}
				let that =this;
				for(let i=0; i<tempFilePaths.length;i++){
						uni.showLoading({
							mask:true
						});
						const path = tempFilePaths[i];
						//因为我这个后台给的接口一次只能上传一张图片，所以每循环一次就调用接口上传一次
						await uni.uploadFile({
							url:this.urlConfig+"/api/images/upload",//后台地址
							filePath: path,
							name: 'file',
							success: uploadFileRes => {
								uni.hideLoading();
								if (uploadFileRes.statusCode === 200) {
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									});
									debugger;
									let dataObj = JSON.parse(uploadFileRes.data);
									// this.imageList.push({
									// 	url: this.urlConfig+"/api/images/"+dataObj.filename,
									// 	name: dataObj.filename
									// })
									
									let changeValue  = this.value ?  this.value +this.splitValue+dataObj.filename :
									   dataObj.filename
									;
									this.$emit("update-value", changeValue);
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									});
								}
							},
						});
					console.log('filePathsList', this.imageList);
				}
			},
			
			pickerDelete(e) {
				this.imageList.map((item, i) => {
					if (item.uri == e.tempFilePath) {
						this.imageList.splice(i, 1)
					}
				})
				
				let changeValue = '';
				if(this.imageList && this.imageList.length>0){
					let file1 = this.imageList[0].name;
					for(let i=1;i<this.imageList.length;i++){
						file1 = file1 + this.splitValue + this.imageList[i].name;
					}
					changeValue = file1;
				}
				this.$emit("update-value", changeValue);
			},
		},
	};
</script>

<style>

</style>
